<script setup>
import {ref,onMounted,onUnmounted,defineProps,defineEmits} from "vue"
import { router } from "../router";

//resources
// import cwzz_fm from "../../public/images/music/cwzz.jpg"
// import jx_chang from "../../public/images/music/jx_chang.jpg"
// import mygo_chang from "../../public/images/music/mygo_chang.jpg"

const emit = defineEmits(['reuturnBtn'])



const props = defineProps({
    image1Url:{type:String},
    image2Url:{type:String},
    image3Url:{type:String}
})

const image1BoxRef = ref(null)
const image2BoxRef = ref(null)
const image3BoxRef = ref(null)

let inter = null
const swiperChangeBtnNum = ref(0) //让轮播图转换的状态符
onMounted(()=>{
    inter = setInterval(()=>{
        if(swiperChangeBtnNum.value >= 3){
            swiperChangeBtnNum.value = 0
            return
        }
        switch(swiperChangeBtnNum.value){
            case 0:
                image1BoxRef.value.style.height = '70%'
                image1BoxRef.value.style.zIndex = 2
                image1BoxRef.value.style.transform = "translateX(0)"
                image1BoxRef.value.style.background = "rgba(0,0,0,0.5)"

                image2BoxRef.value.style.height = '90%'
                image2BoxRef.value.style.zIndex = 3
                image2BoxRef.value.style.transform = "translateX(0)"
                image2BoxRef.value.style.background = "none"

                image3BoxRef.value.style.height = '70%'
                image3BoxRef.value.style.zIndex = 2
                image3BoxRef.value.style.transform = "translateX(0)"
                image3BoxRef.value.style.background = "rgba(0,0,0,0.5)"
                break
            case 1:
                image1BoxRef.value.style.height = '70%'
                image1BoxRef.value.style.zIndex = 2
                image1BoxRef.value.style.transform = "translateX(120%)"
                image1BoxRef.value.style.background = "rgba(0,0,0,0.5)"

                image2BoxRef.value.style.height = '70%'
                image2BoxRef.value.style.zIndex = 2
                image2BoxRef.value.style.transform = "translateX(-60%)"
                image2BoxRef.value.style.background = "rgba(0,0,0,0.5)"

                image3BoxRef.value.style.height = '90%'
                image3BoxRef.value.style.zIndex = 3
                image3BoxRef.value.style.transform = "translateX(-59.89%)"
                image3BoxRef.value.style.background = "none"
                break
            case 2:
                image1BoxRef.value.style.height = '90%'
                image1BoxRef.value.style.zIndex = 3
                image1BoxRef.value.style.transform = "translateX(60%)"
                image1BoxRef.value.style.background = "none"

                image2BoxRef.value.style.height = '70%'
                image2BoxRef.value.style.zIndex = 2
                image2BoxRef.value.style.transform = "translateX(60%)"
                image2BoxRef.value.style.background = "rgba(0,0,0,0.5)"

                image3BoxRef.value.style.height = '70%'
                image3BoxRef.value.style.zIndex = 2
                image3BoxRef.value.style.transform = "translateX(-120%)"
                image3BoxRef.value.style.background = "rgba(0,0,0,0.5)"
                break
        }
        swiperChangeBtnNum.value += 1
    },2000)
})

onUnmounted(()=>{
    clearInterval(inter)
    inter = null
})

const goToMusicPage = (num) => {
    // console.log('goToMusicPage test:',num)
    emit('reuturnBtn',num)
}

</script>

<template>
    <div class="swiperImageAll">
        <div class="image1Box" ref="image1BoxRef" @click="goToMusicPage(1)">
            <img :src="image1Url" alt="" />
        </div>
        <div class="image2Box" ref="image2BoxRef" @click="goToMusicPage(2)">
            <img :src="image2Url" alt="" />
        </div>
        <div class="image3Box" ref="image3BoxRef" @click="goToMusicPage(3)">
            <img :src="image3Url" alt=""/>
        </div>
    </div>
</template>

<style scoped>
.swiperImageAll{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.image1Box{
    margin-left: 100px;
    width: 40%;
    height: 70%;
    /* background-color: skyblue; */
    border-radius: 10px;
    z-index: 1;
    transition: all 0.2s;
    transform: translateX(0);
}
.image1Box img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 1;
    user-select: none;
}
.image2Box{
    margin-left: -300px;
    width: 40%;
    height: 90%;
    border-radius: 10px;
    z-index: 2;
    transition: all 0.2s;
    transform: translateX(0);
}
.image2Box img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 1;
    user-select: none;
}
.image3Box{
    margin-left: -300px;
    width: 40%;
    height: 70%;
    border-radius: 10px;
    z-index: 1;
    transition: all 0.2s;
    transform: translateX(0);
}
.image3Box img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 1;
    user-select: none;
}
</style>